<template>
	<view class="container">
		<view class="content">
			<u-form :model="form" ref="uForm">
				<u-input :customStyle="customStyle" v-model="form.nickname" placeholder="昵称" placeholder-style="color:#d8d8d8"/>
				<u-line></u-line>
				<u-input :customStyle="customStyle" v-model="form.account" placeholder="账号" placeholder-style="color:#d8d8d8"/>
				<u-line></u-line>
				<u-input :customStyle="customStyle" v-model="form.phone" placeholder="手机号" placeholder-style="color:#d8d8d8" len="11"/>
				<u-line></u-line>
				<u-input :customStyle="customStyle" v-model="form.password" type="password" placeholder="密码" placeholder-style="color:#d8d8d8" maxlength="12"/>
				<u-line></u-line>
			</u-form>
			<u-button class="custom-style" type="primary" :disabled="form.nickname && form.account && form.phone && form.password ? false : true" @click="goLogin">注册</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				nickname: '',
				account: '',
				phone: '',
				password: ''
			},
			loading: false,
			customStyle: {
				color: 'white'
			}
		};
	},
	methods: {
		// 跳转登录页面
		goLogin() {
			let account = this.form.account;
			let password = this.form.password
			this.$u.route({
				url: 'pages/login/login',
				type: 'switchTab'
			});
		},
	}
};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column; // 垂直排列子元素
		align-items: center; // 水平居中
		height: 100vh;
		padding-top: 600rpx;
		overflow: hidden;
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}; 
		background-image: url('/static/bgi/loginbg2.jpg');
		background-size: cover;
		background-position: center;
	}
	.container::before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, 0.3); /* 黑色蒙版，透明度为0.3 */
	  z-index: 1; /* 确保蒙版在背景图片上方 */
	}
	.content {
		z-index: 2;
		width: 600rpx;
	}
	
	.footer-text{
		z-index: 3;
		width: 600rpx;
		height: 40rpx;
		font-size: 16px;
		align-items: center;
		color: #2979ff;
		display: flex;
		justify-content: space-between; /* 或者 space-around */
	}
	
	.custom-style{
		background-color: rgb(37, 171, 224);
		width: 100%;
		margin-top: 20rpx;
	}
</style>
